<!DOCTYPE html>
<html>
<head>
    <title>马拉松数据管理后台</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <div class="logo">赛事数据管理系统</div>
            <nav>
                <ul class="nav-list">
                    <li class="active"><a class="nav-link" href="/admin/monitor">实时监控</a></li>
                    <li><a class="nav-link" href="/admin/passdata">过点信息</a></li>
                    <li><a class="nav-link" href="/admin/players">当前选手列表</a></li>
                    <li><a href="/admin/settings">系统设置</a></li>
                </ul>
            </nav>
        </aside>
        
        <main id="content" class="content-area">
            <div class="header">
                <h1>实时数据看板</h1>
                <div class="status-bar">
                    <span>服务器状态：</span>
                    <span id="server-status" class="status-indicator">检测中...</span>
                </div>
                <div class="control-buttons">
                    <button data-action="start" class="start-btn">启动连接</button>
                    <button data-action="stop" class="stop-btn">停止连接</button>
                    <button data-action="reconnect" class="btn reconnect">重新连接</button>
                    <button data-action="reset" class="resetmatch-btn">重置</button>
                </div>
            </div>
            
            <div class="filter-section">
                <div class="search-box">
                    <input type="text" placeholder="搜索设备或选手...">
                    <button>搜索</button>
                </div>
                <div class="filters">
                    <select>
                        <option>全部赛段</option>
                        <option>5公里</option>
                        <option>半程</option>
                        <option>全程</option>
                    </select>
                    <input type="date" class="date-filter">
                </div>
            </div>
            
            <div class="stats-cards">
                <div class="card">
                    <h3>今日参与人数</h3>
                    <p class="number">1,234</p>
                </div>
                <div class="card">
                    <h3>当前在线设备</h3>
                    <p class="number">12</p>
                </div>
                <div class="card">
                    <h3>数据更新时间</h3>
                    <p class="number">2024-03-15 14:30</p>
                </div>
            </div>
            
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>选手ID</th>
                            <th>姓名</th>
                            <th>参赛编号</th>
                            <th>国家</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 示例数据 -->
                        <tr>
                            <td>DEV-001</td>
                            <td>14:28:45</td>
                            <td>5公里</td>
                            <td>1,234</td>
                            <td><span class="status active">在线</span></td>
                        </tr>
                        <tr>
                            <td>DEV-005</td>
                            <td>14:25:12</td>
                            <td>起点</td>
                            <td>2,345</td>
                            <td><span class="status warning">低电量</span></td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="pagination">
                    <button disabled>上一页</button>
                    <span class="current">第1页</span>
                    <button>下一页</button>
                </div>
            </div>
        </main>
    </div>
    <script src="/static/js/components/passdata-component.js"></script>
    <script src="/static/js/components/monitor-component.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="/static/js/components/playerlist-component.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>